<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>component-1</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>component-1</h1>
    <!-- 组件：自定义的html中不存在的标签 -->
    <hr>
    <div id="app">
        <chen></chen>
        <panda></panda>
    </div>
    <div id="id1">
        <chen></chen>
    </div>
    <script type="text/javascript">
    Vue.component('chen',{//全局组件在构造器外定义，一次定义一个，可应用于多个构造器里
        template:`<div style="color:red">我是全局的chen组件</div>`
    })
        var app=new Vue({
            el:'#app',
            components:{//局部组件在构造器内定义,一次可定义多个，只能用于本构造器里
                "panda":{
                    template:`<div style="color:green">我是局部的panda组件</div>`
                }
            }
        }) 
        var id1=new Vue({
            el:'#id1'
        }) 
    </script>
</body>
</html>